<form action="#" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>log:</label>
            <div class="layui-inline">
                <input type="text" name="content" autocomplete="off" placeholder="请输入搜索内容"
                       class="layui-input">
            </div>
            <button class="layui-btn" lay-submit lay-filter="log-table">搜索</button>
        </div>
    </div>
</form>

<script type="text/html" id="log-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
            <i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>

<!--<script type="text/html" id="log-bar">-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="edit-log">编辑</a>-->
<!--</script>-->
<table class="layui-table" lay-filter="log-table" id="log-table">
</table>
<script type="text/javascript">
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        form.render();
        table.render({
            id: "log-table",
            elem: '#log-table'
            , toolbar: '#log-head-bar'
            , cellMinWidth: 80
            , url: '/log/table' //数据接口
            , page: true //开启分页
            , cols: [[
                {checkbox: true},
                {field: 'id', title: 'ID', sort: true, width: 80}
                , {field: 'userId', title: '用户id', width: 80}
                , {field: 'url', title: '请求路径'}
                , {field: 'requestType', title: '请求方式'}
                , {field: 'ip', title: 'ip地址'}
                , {field: 'workTime', title: '操作时间'}
                , {field: 'startTime', title: '开始时间'}
                , {field: 'endTime', title: '结束时间'}
            ]]
        });
        //头工具栏事件
        table.on('toolbar(log-table)', function (obj) {
            console.error("事件" + obj);
            switch (obj.event) {
                case 'goEdit':
                    openEditWindow(null);
                    break;
                case 'delete':
                    var data = table.checkStatus('log-table').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: '/log/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('log-table', {});
                                    } else {
                                        alert(result.msg)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(log-table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-log': {
                    openEditWindow(data);
                    break;
                }

            }
        });
        //
        // function openEditWindow(data) {
        //     layer.open({
        //         type: 1,
        //         content: $('#log-edit-layer').html(),
        //         title: '编辑'
        //         , area: ['550px', '500px'],
        //         btn: ['提交', '取消'] //可以无限个按钮
        //         , yes: function (index, layero) {
        //             layer.load()
        //             $.ajax({
        //                 url: '/log/update',
        //                 data: $("#log-edit-form").serialize(),
        //                 method: 'post',
        //                 success: function (result) {
        //                     if (result.status) {
        //                         table.reload('log-table', {});
        //                         layer.close(index);
        //                     } else {
        //                         alert(result.msg)
        //                     }
        //                     layer.closeAll('loading');
        //                 }
        //             })
        //         }, success: function (layero, index) {
        //             form.render()
        //             if (data != null) {
        //                 form.val("log-edit-form", data);
        //             }
        //         }
        //     });
        // }
        //
        form.on('submit(log-table)', function (data) {
            table.reload('log-table', {
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });

</script>

<!--<script type="text/html" id="log-edit-layer">-->
<!--    <form id="log-edit-form" style="width: 80%" class="layui-form" lay-filter="log-edit-form">-->
<!--        <input type="hidden" name="id">-->
<!--        -->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">userId</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="cusid" required lay-verify="required"-->
<!--                       autocomplete="off"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">log</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="accesslog" required lay-verify="required"-->
<!--                       autocomplete="off"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">过期时间</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="expiretime" required lay-verify="required"-->
<!--                       autocomplete="off"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">开始时间</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="starttime" required lay-verify="required"-->
<!--                       autocomplete="off"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--    </form>-->
<!--</script>-->
